<template>
  <view class="main t-flex">
    <view class="t-flex top">
      <view
        class="t-flex top-item"
        :class="{ 't-bg-E33': current == 0 }"
        @click="
          current = 0;
          getList(1, currentType1, 1);
        "
      >
        <text class="t-size-28 t-color-444" :class="{ 't-color-fff': current == 0 }">一级团队({{ one_num }})</text>
      </view>
      <view
        class="t-flex top-item"
        :class="{ 't-bg-E33': current == 1 }"
        @click="
          current = 1;
          getList(2, currentType1, 1);
        "
      >
        <text class="t-size-28 t-color-444" :class="{ 't-color-fff': current == 1 }">二级团队({{ two_num }})</text>
      </view>
    </view>
    <view v-show="current == 0">
      <view class="t-flex list-type">
        <view
          class="t-flex list-type-item"
          @click="
            currentType1 = 0;
            getList(1, currentType1, 1);
          "
        >
          <text class="t-size-28 t-color-444" :class="{ 't-color-E33': currentType1 == 0 }">综合排序</text>
        </view>
        <view
          class="t-flex list-type-item"
          @click="
            currentType1 = 1;
            getList(1, currentType1, 1);
          "
        >
          <text class="t-size-28 t-color-444" :class="{ 't-color-E33': currentType1 == 1 }">金额排序</text>
        </view>
      </view>
      <block v-if="list1.length > 0">
        <view class="t-flex list-item" v-for="(item, index) in list1" :key="item.id">
          <view class="t-flex" style="flex-direction: row; align-items: center; margin-bottom: 10rpx">
            <image class="user-img" :src="$wanlshop.oss(item.avatar, 35, 35, 2, 'avatar')" mode=""></image>
            <view class="t-flex">
              <text class="t-size-28 t-color-444">{{ item.nickname }}</text>
              <text class="t-color-999 t-size-24">{{ $wanlshop.timeFormat(item.createtime) }}</text>
            </view>
          </view>
          <view style="max-width: 400rpx">
            <text class="t-color-444 t-size-28">累计奖金：{{ item.total_commission || 0 }}</text>
          </view>
        </view>
      </block>
      <block v-else>
        <wanl-empty src="notice_default3x" text="没有更多啦！" />
      </block>
    </view>
    <view v-show="current == 1">
      <view class="t-flex list-type">
        <view
          class="t-flex list-type-item"
          @click="
            currentType2 = 0;
            getList(2, currentType2, 1);
          "
        >
          <text class="t-size-28 t-color-444" :class="{ 't-color-E33': currentType2 == 0 }">综合排序</text>
        </view>
        <view
          class="t-flex list-type-item"
          @click="
            currentType2 = 1;
            getList(2, currentType2, 1);
          "
        >
          <text class="t-size-28 t-color-444" :class="{ 't-color-E33': currentType2 == 1 }">金额排序</text>
        </view>
      </view>
      <block v-if="list2 && list2.length > 0">
        <view class="t-flex list-item" v-for="(item, index) in list2" :key="item.id">
          <view class="t-flex" style="flex-direction: row; align-items: center; margin-bottom: 10rpx">
            <image class="user-img" :src="$wanlshop.oss(item.avatar, 35, 35, 2, 'avatar')" mode=""></image>
            <view class="t-flex">
              <text class="t-size-28 t-color-444">{{ item.nickname }}</text>
              <text class="t-color-999 t-size-24">{{ $wanlshop.timeFormat(item.createtime) }}</text>
            </view>
          </view>
          <view style="max-width: 400rpx">
            <text class="t-color-444 t-size-28">累计奖金：{{ item.total_commission || 0 }}</text>
          </view>
        </view>
      </block>
      <block v-else>
        <wanl-empty src="notice_default3x" text="没有更多啦！" />
      </block>
    </view>
  </view>
</template>
<script>
export default {
  //注册组件
  components: {},
  data() {
    return {
      current: 0,
      currentType1: 0,
      currentType2: 0,
      one_num: 0,
      two_num: 0,
      list1: [],
      list2: [],

      page1: 1,
      total1: 1,

      page2: 1,
      total2: 1,
    };
  },
  //监听属性
  computed: {},
  /**
   * 监控data中的数据变化
   */
  watch: {},
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(option) {
    this.one_num = option.one_num;
    this.two_num = option.two_num;

    this.getList(1, 0, 1);
  },
  // 页面上拉触底事件的处理函数
  onReachBottom() {
    if (this.current == 0) {
      if (this.total1 > this.page1) {
        this.page2 = ++this.page2;
        this.getList(1, this.currentType1, this.page1);
      }
    } else if (this.current == 1) {
      if (this.total2 > this.page2) {
        this.page2 = ++this.page2;
        this.getList(2, this.currentType2, this.page2);
      }
    }
  },
  /** 方法合集 */
  methods: {
    getList(type = 1, sort = 0, page) {
      // 团队列表
      // type:1=一级 2=二级    sort：0默认综合排序  1=佣金排序
      this.$api.get({
        baseUrl: this.$wanlshop.config('vipBaseUrl'),
        url: '/distribution/user/teamList',
        // contentType: 'form',
        data: {
          type,
          sort,
          page,
        },
        loadingTip: '加载中...',
        success: res => {
          console.log('团队列表 ========>', res);
          if (type == 1) {
            if (page == 1) {
              this.list1 = res.data;
            } else {
              this.list2 = this.list2.concat(res.data);
            }
            this.total1 = res.last_page;
          } else if (type == 2) {
            if (page == 1) {
              this.list2 = res.data;
            } else {
              this.list2 = this.list2.concat(res.data);
            }
            this.total2 = res.last_page;
          }
        },
      });
    },
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},
  // 页面相关事件处理函数--监听用户下拉动作
  onPullDownRefresh: function () {},
  //  点击 tab 时触发，参数为Object，具体见下方注意事项           微信小程序、百度小程序、H5、5+App（自定义组件模式）
  onTabItemTap: function (e) {},
  //  监听页面滚动，参数为Object
  onPageScroll: function (e) {},
  //  监听原生标题栏按钮点击事件，参数为Object	         5+ App、H5
  onNavigationBarButtonTap: function (e) {},
  //  监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解	5+App、H5
  onBackPress: function () {},
};
</script>
<style lang="scss" scoped>
// @import "@/styles/t-base.scss";
.t-flex {
  /* #ifndef APP-NVUE */
  display: flex;
  box-sizing: border-box;
  /* #endif */
  flex-direction: column;
}

.t-color-333 {
  color: #333333;
}

.t-size-40 {
  font-size: 40rpx;
}

.t-size-32 {
  font-size: 32rpx;
}

.t-size-30 {
  font-size: 30rpx;
}

.t-size-24 {
  font-size: 24rpx;
}

.t-size-28 {
  font-size: 28rpx;
}

.t-color-666 {
  color: #666666;
}

.t-color-999 {
  color: #999999;
}

.t-color-444 {
  color: #444444;
}

.t-color-fff {
  color: #ffffff;
}

.t-color-E33 {
  color: #fe6600;
}

.t-bg-E33 {
  background-color: #fe6600;
}

.t-font-700 {
  font-weight: 700;
}

.main {
  width: 750rpx;
  align-items: center;
}

.top {
  flex-direction: row;
  width: 686rpx;
  height: 88rpx;
  background: #d5d6d9;
  margin-top: 20rpx;
}

.top-item {
  flex: 1;
  justify-content: center;
  align-items: center;
}

.list-type {
  flex-direction: row;
  height: 88rpx;
  margin-top: 20rpx;
  margin-left: 56rpx;
  width: 690rpx;
}

.list-type-item {
  justify-content: center;
  align-items: center;
  margin-right: 80rpx;
}

.list-item {
  width: 750rpx;
  height: 146rpx;
  background: #ffffff;
  // box-shadow: 0rpx -4rpx 12rpx 0rpx rgba(205, 205, 205, 0.3);
  border-radius: 4rpx;
  padding: 0 30rpx;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #f9f9f9;
}

.user-img {
  width: 88rpx;
  height: 88rpx;
  margin-right: 20rpx;
  border-radius: 200rpx;
}
</style>
